<style lang="less" scoped>
@import "@/assets/style/variables.less";



.banner {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: @border-radius;
    box-shadow: @box-shadow;
    padding: @padd;

    .banner-form {
        margin-top: 15px;

    }

    .remove {
        margin-bottom: 15px;
    }

    .banner-form,
    .banner-table {
        .opt {
            margin-bottom: 15px !important;
        }

        .preview-img {
            width: 360px;
            height: 180px;
        }

        .el-upload-list {
            display: none;
        }


    }

    .my-input {
        width: 300px !important;
        height: 28px;
        line-height: 28px;
        -webkit-appearance: none;
        background-color: #FFF;
        background-image: none;
        border: 1px solid #DCDFE6;
        box-sizing: border-box;
        color: #606266;
        display: inline-block;
        font-size: inherit;
        height: 40px;
        line-height: 40px;
        outline: 0;
        padding: 0 15px;
        transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
        width: 100%;
        border-radius: 4px;
    }
}
</style>
<template>
    <div class="banner">
        <div class="banner-header">
            <el-button size="small" type="danger">添加文章分类</el-button>
        </div>
        <div class="banner-form">
            <div class="opt">
                <el-input v-model="cate" placeholder="请输入文章分类"></el-input>
            </div>
            <div class="opt">
                <el-input v-model="cate_name" placeholder="请输入文章子分类"></el-input>
            </div>
            <div class="opt">
                <el-button type="primary" @click="addCateFn">点击添加</el-button>
            </div>
        </div>
    </div>
</template>

<script>
// 导入api
import { Message } from 'element-ui';
import { addCate } from '../api/index'


export default {
    data() {
        return {
            centerDialogVisible: false,
            cate: '',
            cate_name: ''
        }
    },
    watch: {
        $route: {
            immediate: true,
            deep: true,
            handler(val) {
                this.$store.commit('addTab', val)
            }
        }
    },
    methods: {
        // 点击发布
        async addCateFn() {
            if (this.cate.trim() == '' || this.cate_name.trim() == '') {
                Message({
                    type: 'error',
                    message: "输入框不能为空",
                    showClose: true,
                    offset: 100
                })
                return false;
            }
            await addCate({ cate: this.cate, cate_name: this.cate_name })
                .then(
                    res => {
                        // console.log(res)
                        if (res.code == 200) {
                            Message({
                                type: 'success',
                                message: res.msg,
                                showClose: true,
                                offset: 100
                            })
                        } else {
                            Message({
                                type: 'error',
                                message: '添加失败',
                                showClose: true,
                                offset: 100
                            })
                        }
                    }, err => {
                        console.log(err)
                        Message({
                            showClose: true,
                            message: '服务器错误',
                            offset: 100,
                            type: 'error'
                        })
                    }
                )

        }
    },
}
</script>